<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }} 元</p>
    <p>{{ info }}</p>
    <button @click="changeTitle">在子组件直接修改title值</button>
    <button @click="kanFn">砍价</button>
  </div>
</template>

<script>
export default {
  // props：里面定义的变量的值，就是将来父组件调用此组件时
  // 需要传递过来的值
  props: ["title", "price", "info", "index"],

  // 验证父组件传递过来的数据是否可以直接在子组件中修改
  // 答：不可以
  /**
   *  为什么不能直接修改呢？
   * 答：因为vue规定了props里的变量只读。
   * 为什么要规定只读呢?
   * 答：子组件修改，不通知父组件，造成数据不一致，因为就直接规定props只读
   *
   * 重要的概念：像这种只能从父到子的流向数据，叫单向数据流
   *
   */
  methods: {
    changeTitle() {
      // 修改后直接报错了

      this.title = "666";
    },
    // 砍价
    kanFn() {
      // 通知父组件进行砍价，并传递砍的价格给父组件，
      // 以及需要通过父组件砍哪个商品的价格
      // 那么怎么通过父组件呢？以及怎么传值呢？
      // 答：vue提供了一个自定义事件方法来通知父组件并传值给父组件
      // 自定义事件的语法：this.$emit("自定义事件名", 参数1,参数2.。。。)
      // 参数1，参数2等等，表示，需要传递给父组件的数据
      // console.log(this.index);
      // 这个种通知父组件修改数据的方式，我们称为"子传父"通信技术
      this.$emit("subprice", this.index, 1);
    },
  },
};
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>